<template>
  <div>
    <load :show="show" :overlay="overlay" />
    <van-nav-bar
      :title="titleList[activeKey]"
      left-text="返回"
      left-arrow
      @click-left="handleReturn"
      @click-right="handleToSearch"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="library-box">
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item title="所有分类" />
        <van-sidebar-item title="点击榜" />
        <van-sidebar-item title="完结榜" />
        <van-sidebar-item title="更新榜" />
        <van-sidebar-item v-for="(item, index) in typeList" :title="item.name" :key="index" />
      </van-sidebar>
      <div class="library-content">
        <div v-show="activeKey === 0">
          <div class="library-all">
            <div
              class="library-item"
              v-for="(item, index) in typeList"
              :key="index"
              @click="handleToList(item.name,item.id)"
            >
              <van-image class="library-img" :src="item.bookList[0].image" v-if="item.bookList.length > 0">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <img class="library-img" src="http://foglake.sanye666.top/images/default-covor.jpg" v-else />
              <span>{{item.name}}</span>
            </div>
          </div>
        </div>
        <div v-show="activeKey === 1">
          <book-list :list="clickList" />
        </div>
        <div v-show="activeKey === 2">
          <book-list :list="overList" />
        </div>
        <div v-show="activeKey === 3">
          <book-list :list="updateList" />
        </div>
        <div v-show="activeKey === index+4" v-for="(item, index) in typeList" :key="index">
          <book-list :list="item.bookList"  v-if="item.bookList.length > 0"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Taro from "@tarojs/taro";
import Load from "@components/Load";
import {
  getTypeList,
  getClickList,
  getOverList,
  getUpdateList,
} from "@api/homepage";
import BookList from "@components/BookList";
export default {
  name: "Library",
  components: { BookList, Load },
  data() {
    return {
      activeKey: 0,
      typeList: [],
      clickList: [],
      overList: [],
      updateList: [],
      titleList: [],
      show: false,
      overlay: true,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.show = true;
      this.getTypeList();
      this.getClickList();
      this.getOverList();
      this.getUpdateList();
      setTimeout(() => {
        this.show = false;
      }, 1000);
    },
    getTypeList() {
      getTypeList().then((res) => {
        if (res.code == 200) {
          this.typeList = res.data;
          console.log(this.typeList);
          this.getTitleList(res.data);
        }
      });
    },
    getClickList() {
      getClickList().then((res) => {
        if (res.code == 200) {
          this.clickList = res.data.bookList.data;
        }
      });
    },
    getOverList() {
      getOverList().then((res) => {
        if (res.code == 200) {
          this.overList = res.data.bookList.data;
        }
      });
    },
    getUpdateList() {
      getUpdateList().then((res) => {
        if (res.code == 200) {
          this.updateList = res.data.bookList.data;
        }
      });
    },
    onChange(e) {
      console.log(e);
    },
    handleToList(title, type) {
      Taro.navigateTo({
        url: `/pages/booklist/booklist?title=${encodeURI(title)}&type=${type}`,
      });
    },
    getTitleList(data) {
      let titleList = ["所有分类", "点击榜", "完结榜", "更新榜"];
      if (Array.isArray(data)) {
        data.forEach((item) => {
          titleList.push(item.name);
        });
      }
      this.titleList = titleList;
    },
    handleReturn() {
      Taro.navigateBack();
    },
    handleToSearch() {
      Taro.navigateTo({
        url: "/pages/search/search",
      });
    },
  },
};
</script>

<style scoped>
.library-box {
  display: flex;
  height: calc(100vh - 46Px);
}
.library-content {
  width: calc(100% - 85Px);
  height: calc(100vh - 46Px);
}
.van-sidebar-item--select::before {
  background-color: #92c8ff;
}
.library-all {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
.library-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px;
}
.library-img {
  height: 150px;
  width: 122.5px;
  margin-bottom: 20px;
}
.library-item span {
  font-size: 24px;
}
</style>